<script setup>
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { getProjectDetailByName } from "@/api/innovation";

const router = useRoute();
const receiveContent = ref("");
const splitData = ref("");
const beginTimeList = ref("");
const endTimeList = ref("");
const webUrlList = ref("");
const name = ref("");
const loading = ref(false);

onMounted(() => {
  loading.value = true;
  name.value = router.query.ppName;
  getProjectDetailByName({ name: name.value })
    .then((response) => {
      receiveContent.value = response.data.data;
      splitData.value = response.data.data.ppIntro.split("|");
      beginTimeList.value = response.data.data.ppApplyBegin.split("|");
      endTimeList.value = response.data.data.ppApplyEnd.split("|");
      webUrlList.value = response.data.data.ppWebsite.split("|");
      console.log(response.data.data.ppApplyBegin.split("|"));
      loading.value = false;
    })
    .catch((error) => {
      console.log(error);
      loading.value = false;
    });
  document.documentElement.scrollTop = 0;
});

//打开比赛项目官网页面
const toWebsite = (url) => {
  window.open(url);
  // window.open(`https://${url}`);
};
</script>

<template>
  <div v-loading="loading" style="min-height: 200px">
    <div class="projectDetails">
      <div class="firstbox">
        <div class="firstbox-part1">
          <span>创新创业>{{ receiveContent.ppCategory }}</span>
          <div class="projectName">
            <div class="point"></div>
            <h2>{{ receiveContent.ppName }}</h2>
          </div>
          <span v-if="receiveContent.ppPopularity"
            ><i class="iconfont icon-huoyan"></i> 参与热度：<i
              class="iconfont icon-shoucang"
              v-for="n in parseInt(receiveContent.ppPopularity)"
              :key="n"
            ></i
          ></span>
          <h3>大赛官网&公众号</h3>
          <div class="webUrl">
            <span>官网：</span>
            <span
              @click="toWebsite(item)"
              v-for="(item, index) in webUrlList"
              :key="index"
              >{{ item }}</span
            >
          </div>
          <span>公众号：{{ receiveContent.ppPublicAccount }}</span>
        </div>
      </div>
      <h3 class="title">简介：</h3>
      <ul>
        <li v-for="(item, index) in splitData" :key="index">{{ item }}</li>
      </ul>
      <h3 class="title">本系适合对象&外专业</h3>
      <ul>
        <li>本系适合对象：{{ receiveContent.ppSuitableStudent }}</li>
        <li>外专业：{{ receiveContent.ppOutside }}</li>
      </ul>
      <h3 class="title">往年报名时间参考</h3>
      <div
        class="time-box"
        v-for="(begin, beIndex) in beginTimeList"
        :key="beIndex"
      >
        <span>{{ begin }} </span
        ><span
          style="margin: 0"
          v-if="endTimeList[beIndex] != null && endTimeList[beIndex] != ''"
          >- {{ endTimeList[beIndex] }}</span
        >
      </div>
      <h3 class="title">参赛形式&报名费用</h3>
      <ul>
        <li>参赛形式：{{ receiveContent.ppCompetitionForm }}</li>
        <li>报名费用：{{ receiveContent.ppApplyFee }}</li>
      </ul>
      <h3 class="title">指导老师</h3>
      <span>{{ receiveContent.ppGuidanceTeacher }}</span>
    </div>
  </div>
</template>
<style scoped>
.projectDetails {
  margin: 0px 35px;
  font-size: 18px;
  line-height: 30px;
  width: 900px;
}

.point {
  width: 20px;
  height: 20px;
  margin: 6px 10px;
  background-color: #1e9ab5;
  border-radius: 100px;
  border: 1px solid white;
  box-shadow: 2px 2px 10px grey;
}

.projectDetails h2 {
  color: #555555;
  line-height: 35px;
}

.projectName {
  display: flex;
  flex-direction: row;
  margin: 10px 0px;
}

.projectDetails h3 {
  width: 1000px;
  line-height: 40px;
  padding-left: 20px;
  background-color: #f2f2f2;
  font-size: 20px;
  margin: 10px 0px;
}

.title {
  width: 500px;
}
.time-box {
  display: flex;
  flex-direction: row;
}

.firstbox-part1 span i:first-child {
  color: red;
  font-size: 20px;
  margin-right: 5px;
}

.firstbox-part1 span i {
  color: rgb(246, 246, 23);
  font-size: 20px;
}

.projectDetails span {
  display: block;
  margin-left: 20px;
}

.firstbox {
  display: flex;
  flex-direction: row;
}

.pdimg {
  width: 380px;
  height: 230px;
  margin-left: 25px;
  margin-top: 10px;
  background-color: rgb(70, 56, 38);
}

ul {
  margin-left: 20px;
}

.webUrl {
  display: flex;
  flex-direction: row;
}
</style>
